<template>
  <div class="app-container">

    <div class="filter-container">
      <el-input v-model="listQuery.keyword" placeholder="关键字" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchGetList" />
    </div>
    <img class="picbox" width="95%" src="@/assets/images/shoe-312435_1280.png" v-show="showLogo" />

    <el-menu v-show="!showLogo" :default-active="activeOrderMode" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="comp">综合</el-menu-item>
      <el-menu-item index="sales">热度</el-menu-item>
      <el-submenu index="price">
        <template slot="title">价格</template>
        <el-menu-item index="priceAse">从低到高</el-menu-item>
        <el-menu-item index="priceDesc">从高到底</el-menu-item>
      </el-submenu>
      <el-menu-item index="news">新品</el-menu-item>
    </el-menu>

    <div v-show="!showLogo">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-for="fit in list" :key="fit.mainId">
          <el-card :body-style="{ padding: '0px' }">
            <div slot="header" class="clearfix">
              <span>{{ fit.article }}</span>
            </div>
            <div style="padding: 14px;">
              <router-link target="_blank" :to="{path:'/product/detail', query: {platformId:fit.mainId,platform:listQuery.platform,soldInfo:fit.soldInfo}}">
                <el-image style="width: 145px;height:93px;" :src="fit.logoUrl" :title="fit.title"></el-image>
                <p class="demonstration"><span title="价格">￥{{ fit.minSalePrice }}</span> 🔥<span title="销量">{{ fit.soldInfo }}</span></p>
              </router-link>
            </div>

          </el-card>
        </el-col>
      </el-row>
    </div>
    <pagination v-show="total>0 &&!showLogo" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />

  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import request from "@/utils/request";

export default {
  name: "ProductList",
  components: { Pagination },
  data() {
    return {
      list: [],
      total: 0,
      activeOrderMode: "comp",
      lastOrderMode: "comp",
      listLoading: false,
      showLogo: true,
      listQuery: {
        platform: "du",
        keyword: "",
        current: 0,
        size: 20,
        orderMode: null,
      },
    };
  },
  created() {
    // this.getList()
    // request.get("https://api.ipify.org/");
  },
  methods: {
    getList() {
      // this.total = 0
      // this.list = []
      if (!this.listQuery.keyword) {
        this.showLogo = true;
        return;
      }
      this.listLoading = true;
      return request({
        url: "/goods/list",
        method: "post",
        data: this.listQuery,
      }).then((res) => {
        const data = res.data;
        this.list = data.itemList;
        this.total = data.total;
        this.listLoading = false;
      });
    },
    searchGetList() {
      this.showLogo = false;
      this.listQuery.current = 1;
      this.getList();
    },
    handleSelect(orderMode, keyPath) {
      if (this.lastOrderMode === orderMode) {
        return;
      }
      this.lastOrderMode = orderMode;
      this.listQuery.orderMode = orderMode;
      this.getList();
    },
  },
};
</script>

<style scoped>
.block {
  float: left;
  width: 25%;
  text-align: center;
}
.app-container {
  width: 80%;
  margin: auto;
  text-align: center;
}
</style>
<style >
.pagination-container {
  clear: both;
}
.el-input {
  width: 50%;
}
.filter-container {
  text-align: center;
  margin-bottom: 20px;
}
.picbox {
  /* transform: rotate(180deg); */
  width: 60%;
}
.el-col-6 {
  text-align: center;
  margin-bottom: 20px;
}
</style>
